<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <style>
        .order-img, .order-info{
            float: left;
            margin-right: 5px;
            height: 56px;
        }
        .order-info{
            padding-top: 5px;
        }
        .order-opt{
            position: absolute;
            right: 30px;
            color: #CCCCCC;
            font-size: 20px;
        }
        .order-info h4{
            margin-top: 5px;
        }
        .contact{
            font-size: 12px;padding-left: 10px;
        }
    </style>
</head>
<body class="actlist_bg">
    <div class="container" style="min-height:640px">
        <div class="row">
            <div style="position: fixed;top: 10px;z-index: 10;" class="col-xs-12">
                <a class="icon-arrow-left" style="color: #ffffff;font-size: 24px;" href="/faction/<%=factionId %>"></a>
                <a class="icon-cog" id="order_opt" style="color: #ffffff;font-size: 24px;float: right;" href="javascript:showOptMenu();"></a>
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="font_shadow_133000" style="text-align: center;color: #ffffff;">
            <h2><strong>订单列表</strong></h2>
        </div>
        <ul class="nav nav-tabs" role="tablist">
            <li class="<%=status==='waiting'?'active':''%>"><a href="/orderlist/<%=factionId %>/waiting">未支付订单</a></li>
            <li class="<%=status==='pay'?'active':''%>"><a href="/orderlist/<%=factionId %>/pay">已支付订单</a></li>
            <li class="<%=status==='finish'?'active':''%>"><a href="/orderlist/<%=factionId %>/finish">已结束订单</a></li>
        </ul>
        <div class="tab-content" style="min-height: 400px;">
            <div class="tab-pane active" id="waiting">
                <% if(orders.length > 0){ %>
                    <% orders.forEach(function(order){
                    var goods = order.goodsList[0];
                %>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="bg_white_panel" style="margin-top: 10px;">
                            <div class="order-img">
                                <img src="/goods/5486bb47b83c811433589f5d_5487ecf3b50a30cf5e9cf760.jpg" class="img-rounded" style="width: 56px;"/>
                            </div>
                            <div class="order-info">
                                <div><strong>订单好啊</strong></div>
                                <div>
                                    <a><%=order.creator.name %></a>
                                    <strong style="color: #FE8125">￥<%=order.totalFee%></strong>
                                    <%if(order.status === 'waiting'){%>
                                    (未支付)
                                    <%}%>
                                    <%if(order.status === 'pay'){%>
                                    (已支付)
                                    <%}%>
                                    <%if(order.status === 'finish'){%>
                                    (已结束)
                                    <%}%>
                                </div>
                            </div>
                            <!-- <div class="off-tag">已下架</div>-->
                            <div class="order-opt">
                                <input type="checkbox" name="goodsId" value="<%=order._id%>" />
                                <div class="icon-arrow-down show-contact"></div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="contact" style="display: none">
                                <hr>
                                <ul>
                                    <li><label>成交时间:</label> <span><%=dateUtil.formatDateNew(order.creatTime, 'yyyy-MM-dd hh:mm') %></span></li>
                                    <li><label>收货人:</label> <%=order.address.reciver %></li>
                                    <li><label>城市:</label> <%=order.address.city %></li>
                                    <li><label>详细地址:</label> <%=order.address.detail %></li>
                                    <li><label>邮编:</label> <%=order.address.postal %></li>
                                    <li><label>联系方式:</label> <%=order.address.contact %></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                    <% }) %>
                <% } %>
            </div>
        </div>
        <div class="modal fade" id="orderOpts" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <%if(/waiting|pay/.test(status)){%>
                        <button type="button" class="btn btn-default btn-lg btn-block" id="finishOrderBtn">结束订单</button>
                        <%}%>
                        <%if(/finish/.test(status)){%>
                        <button type="button" class="btn btn-default btn-lg btn-block" id="delOrderBtn">删除订单</button>
                        <%}%>
                    </div>
                </div>
            </div>
        </div>
        <% include ../include/copyright.html %>
    </div>
    <% include ../include/js_footer.html %>
    <script>
        $(function(){
            $('.show-contact').on('click', function(){
                $(this).parent().next().next().toggle()
            });
            $('#finishOrderBtn').on('click', function(){
                finishOrder();
            });
        });
        function finishOrder(){
            var idArr = [];
            $('input[name="goodsId"]:checked').each(function(obj){
                idArr.push($(this).val());
            });
            if(idArr.length === 0) return;
            $.post('/setOrderStatus', {ids: idArr, status: 'finish'}, function(res){
                console.log(res)
            })
        }
        function showOptMenu(){
            $('#orderOpts').modal('show');
        }
    </script>
</body>
</html>